<template>
  <div class="chat-main">
    <div 
      class="chat-left-layout" 
    >
      <LEFT  v-model:current_model="Current_left_Model" 
       v-model:current_expand="Current_Expand_Model" 
       v-model:show_expand="show_expand"/>
    </div>
    <div class="chat-center-layout">
      <CENTER v-model:current_model="Current_left_Model" />
    </div>
    <!-- 右侧需要重置状态使用v-if -->
    <div class="chat-right-layout" v-if="show_expand" >
      <RIGHT  v-model:current_expand="Current_Expand_Model"/>
    </div>
  </div>
</template>

<script setup>
import {defineModel} from 'vue'
import LEFT from './left/layout.vue'
import CENTER from './center/layout.vue'
import RIGHT from './right/layout.vue'


let Current_left_Model = defineModel('clm', {default: 'message'})
let Current_Expand_Model = defineModel('cem', {default: null})
let show_expand = defineModel('se', {default: false})



</script>

<style scoped>
.chat-main {
  --left-width-collapsed: 50px;
  --left-width-expanded: 240px;
  --right-width: 250px;
  --gap: 12px;
  --border-radius: 8px;
  
  display: flex;
  height: calc(100vh - 96px);
  width: calc(100% - 32px);
  margin: 16px;
  gap: var(--gap);
  overflow: visible;
  min-width: 600px; /* 防止整体过度压缩 */
}

.chat-left-layout {
  flex: 0 0 var(--left-width-collapsed);
  min-width: var(--left-width-collapsed);
  max-width: var(--left-width-expanded);
  border-radius: var(--border-radius);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #ac85d6, #6397f1);
  overflow: visible;
}

.chat-center-layout {
  flex: 1;
  min-width:500px; /* 中心区域最小宽度 */
  background-color: #ffffff;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.chat-right-layout {
  flex: 0 0 var(--right-width);
  min-width: var(--right-width);
  background:linear-gradient(135deg,#8cb0ee,#a7e9c8);
  border: 1px solid #e9ecef;
  border-radius: var(--border-radius);
  padding: 8px;
  transition: all 0.2s ease;
  overflow: visible;
}



.chat-right-layout:hover {
  background-color: #f1f3f5;
  box-shadow: 0 0 0 1px #dee2e6;
}
</style>